<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding:22px 22px 0 22px;">
      <!-- 搜索表单 -->
      <el-form
        ref="searchForm"
        label-width="120px"
        @keyup.enter.native="$refs.table.reload({page:{page:1,limit:10}})"
        @submit.native.prevent
      >
        <el-row type="flex" justify="center">
          <el-col :md="8" :sm="12">
            <el-form-item label="关键字:" prop="name">
              <el-input
                v-model="key"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="12">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="getEchoLog"
              >查询
              </el-button>
              <el-button
                v-show="false"
                @click="(table.data = []) && $refs.table.reload()"
              >重置</el-button>
              <el-button
                type="info"
                @click="clean"
              >清除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <ele-data-table
        ref="table"
        :config="table"
        :choose.sync="choose"
        highlight-current-row
        style="margin:0 100px"
      >
        <template slot-scope="{}">
          <el-table-column
            prop="key"
            label="键值"
            show-overflow-tooltip
            min-width="110"
          />
          <el-table-column
            prop="path"
            label="访问路径"
            show-overflow-tooltip
            min-width="110"
          />
          <el-table-column
            prop="ip"
            label="终端IP"
            show-overflow-tooltip
            min-width="110"
          />
          <el-table-column
            prop="ua"
            label="终端UA"
            show-overflow-tooltip
            min-width="110"
          />
          <el-table-column
            prop="status"
            label="是否失效"
            show-overflow-tooltip
            min-width="110"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.status === 'False'" type="success" size="mini">
                未失效
              </el-tag>
              <el-tag v-else-if="row.status === 'True'" type="info" size="mini">
                已失效
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            show-overflow-tooltip
            min-width="135"
          />
        </template>
      </ele-data-table>
      <div style="margin:40px 0">
        <el-divider content-position="left"><h5>说明</h5></el-divider>
        <p style="margin-top:40px">回显接口</p>
        <p>如果需要使用该功能，可设置payload为： https://server:port/echolog/key/{随机字符}/?+其他有效信息 如cookie等，查询关键字为回显接口接收的 {随机字符}，支持模糊查询</p>
        <p style="margin-top:20px">功能说明</p>
        <p>该功能可参考dnslog ,相较之下，使用范围受限，但是它不怕被屏蔽，不需要独立域名，开封即用，用于盲攻击也是不错的</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table: {
        url: '/echolog/list/echolist/ /',
        where: {}
      },
      choose: [],
      key: ''
    }
  },
  methods: {
    getEchoLog() {
      if (this.key !== '') {
        this.table.url = `/echolog/list/echolist/${this.key}/`
        this.$refs.table.reload({ page: { page: 1, limit: 10 }})
      } else {
        this.$message({
          type: 'warning',
          message: '键值为空'
        })
      }
    },
    clean() {
      const echoKey = this.key
      if (echoKey !== '') {
        this.$confirm(`是否清除${echoKey}的回显记录?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(`/echolog/echo_clean/${echoKey}/`).then((res) => {
            const resp = res.data
            let status = 'error'
            if (resp.code === 0) {
              status = 'success'
            } else {
              status = 'error'
            }
            this.$message({
              type: status,
              message: resp.msg
            })
            this.table.url = '/echolog/list/echolist/ /'
            this.$refs.table.reload()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message({
          type: 'warning',
          message: '键值为空'
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
